<template>
    <div>
        <el-dialog title="商品评论" :visible.sync="comment.visible">
            <el-input
                type="textarea"
                :rows="2"
                placeholder="请进行评价"
                v-model="comment.content">
            </el-input>
            <span slot="footer" class="dialog-footer">
                <el-button @click="visable = false">取 消</el-button>
                <el-button @click="finishComment">完成评价</el-button>
            </span>
        </el-dialog>
        <el-card class="filter-container" shadow="never">
            <div>
                <i class="el-icon-search"></i>
                <span>筛选搜索</span>
                <el-button
                    style="float:right"
                    type="primary"
                    @click="handleSearchList()"
                    size="small">
                    查询搜索
                </el-button>
                <el-button
                    style="float:right;margin-right: 15px"
                    @click="handleResetSearch()"
                    size="small">
                    重置
                </el-button>
            </div>
            <div style="margin-top: 15px">
                <el-form :inline="true" :model="QueryList" size="small" label-width="140px">
                    <el-form-item label="订单号：">
                        <el-input v-model="QueryList.order_number" class="input-width" placeholder="订单号"></el-input>
                    </el-form-item>
                </el-form>
            </div>
        </el-card>
        <el-card class="operate-container" shadow="never">
            <el-tabs v-model="activeName">
                <el-tab-pane label="全部" name="全部"></el-tab-pane>
                <el-tab-pane label="待付款" name="待付款"></el-tab-pane>
                <el-tab-pane label="待发货" name="待发货"></el-tab-pane>
                <el-tab-pane label="待收货" name="待收货"></el-tab-pane>
                <el-tab-pane label="待评价" name="待评价"></el-tab-pane>
                <el-tab-pane label="已完成" name="已完成"></el-tab-pane>
                <el-tab-pane label="已取消" name="已取消"></el-tab-pane>
            </el-tabs>
        </el-card>
        <div class="table-container">
            <el-table ref="orderTable"
                :data="list"
                style="width: 100%;"
                border>
                <el-table-column
                    prop="order_number"
                    label="订单号"
                    align="center">
                </el-table-column>
                <el-table-column
                    prop="submitTime"
                    label="下单时间"
                    align="center">
                </el-table-column>
                <el-table-column
                    prop="teleNumber"
                    label="收货电话"
                    align="center">
                </el-table-column>
                <el-table-column
                    prop="address"
                    label="收货地址"
                    align="center">
                </el-table-column>
                <el-table-column
                    prop="totalPrice"
                    label="订单金额"
                    align="center">
                </el-table-column>
                <el-table-column
                    prop="status"
                    label="订单状态"
                    align="center">
                </el-table-column>
                <el-table-column label="操作" width="200" align="center">
                    <template slot-scope="scope">
                        <el-button
                            v-if="scope.row.billStatus !== 4"
                            size="mini"
                            @click="handleViewOrder(scope.$index, scope.row)"
                        >查看订单</el-button>
                        <el-button
                            v-if="scope.row.billStatus === 4"
                            size="mini"
                            type="primary"
                            @click="handleReviewOrder(scope.$index, scope.row)"
                        >评价商品</el-button>
                        <el-button
                            v-if="scope.row.billStatus === 1"
                            size="mini"
                            type="primary"
                            @click="handlepay(scope.$index, scope.row)"
                        >支付订单</el-button>
                        <el-button
                            v-if="scope.row.billStatus === 3"
                            size="mini"
                            type="primary"
                            @click="handleConfirmOrder(scope.$index, scope.row)"
                        >确认收货</el-button>
                        <el-button
                            v-if="scope.row.billStatus === 5"
                            size="mini"
                            type="danger"
                            @click="handleDeleteOrder(scope.$index, scope.row)"
                        >删除订单</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="pagination-container">
            <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                layout="total, sizes,prev, pager, next,jumper"
                :current-page.sync="QueryList.pageNum"
                :page-size="QueryList.pageSize"
                :page-sizes="[5,10,15]"
                :total="total">
            </el-pagination>
        </div>
        <el-dialog
            title="支付窗口"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose">
            <span>支付接口</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="comment.visible = false">取 消</el-button>
                <el-button type="primary" @click="pay">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import { formatDate } from '@/common/date'
    import qs from 'qs'

    const defaultQueryList = {
        pageNum: 1,
        pageSize: 5,
        billStatus: ''
    }
    export default {
        data () {
            return {
                comment: {
                    visible: false,
                    consumerId: 0,
                    orderNumber: 0,
                    content: ''
                },
                list: [
                ],
                order_number: '',
                QueryList: {
                    order_number: '',
                    status: '',
                    billStatus: 1,
                    pageNum: 1,
                    pageSize: 5
                },
                total: 0,
                statusOptions: [
                    {
                        label: '未支付',
                        value: 1
                    },
                    {
                        label: '待发货',
                        value: 2
                    },
                    {
                        label: '待收货',
                        value: 3
                    },
                    {
                        label: '待评价',
                        value: 4
                    },
                    {
                        label: '已完成',
                        value: 5
                    },
                    {
                        label: '已取消',
                        value: 6
                    }
                ],
                statusMap: {
                    '待付款': 1,
                    '待发货': 2,
                    '待收货': 3,
                    '待评价': 4,
                    '已完成': 5
                },
                activeName: '全部',
                config: {
                    theme: 'success',
                    message: ''
                },
                dialogVisible: false,
                commodityList: []
            }
        },
        watch: {
            activeName (newval, oldval) {
                if (newval === '全部') {
                    this.getOrderList()
                } else {
                    this.getOrderListbyStatus()
                }
            }
        },
        created () {
            this.getOrderList()
        },
        methods: {
            async getCommodityByorderNumber (orderNumber) {
                this.$http.get('/bill/getCommodities/', { params: { 'order_number': orderNumber } }).then(res => {
                    this.commodityList = res.data.data
                    const data = {
                        'commodity_id': this.commodityList[0].commodity_id,
                        'order_number': this.comment.orderNumber,
                        'evaluate': this.comment.content
                    }
                    this.$http.post('/bill/comment/', data).then(res => {
                        //
                    })
                })
            },
            handleResetSearch () {
                this.QueryList = Object.assign({}, defaultQueryList)
                this.activeName = '全部'
                this.getOrderList()
            },
            formatTime (time) {
                if (time === null || time === '') {
                    return ''
                }
                const date = new Date(time)
                return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
            },
            formatAddress (order) {
                let str = order.address_province
                if (order.receiverCity != null) {
                    str += ' ' + order.address_city
                }
                str += ' ' + order.address_county
                str += ' ' + order.address_location
                return str
            },
            async finishComment () {
                console.log(2222)
                this.getCommodityByorderNumber(this.comment.orderNumber)
            },
            async getOrderList () {
                this.list = []
                this.$http.post('/bill/allBillByPage/', qs.stringify(this.QueryList)).then(res => {
                    console.log(res)
                    this.total = res.data.total
                    res.data.list.forEach(item => {
                        item.submitTime = this.formatTime(item.submitTime)
                        this.$set(item, 'status', item.statusMapper[item.billStatus])
                        this.$set(item, 'address', this.formatAddress(item))
                    })
                    this.list = res.data.list
                })
            },
            handleViewOrder (index, row) {
                this.$router.push({
                    name: 'customerorderdetail',
                    query: {
                        orderid: row.order_number
                    }
                })
            },
            handleReviewOrder (index, row) {
                this.comment.visible = true
                this.comment.orderNumber = row.order_number
                this.finishComment(row.order_number)
            },
            handleSizeChange (val) {
                this.QueryList.pageNum = 1
                this.QueryList.pageSize = val
                if (this.activeName === '全部') {
                    this.getOrderList()
                } else {
                    this.getOrderListbyStatus()
                }
            },
            handleCurrentChange (val) {
                this.QueryList.pageNum = val
                if (this.activeName === '全部') {
                    this.getOrderList()
                } else {
                    this.getOrderListbyStatus()
                }
            },
            async getOrderListbyStatus () {
                this.QueryList.billStatus = this.statusMap[this.activeName]
                console.log(this.QueryList)
                this.list = []
                this.$http.post('/bill/findOrderByStatus/', this.QueryList).then(res => {
                    console.log(res)
                    this.total = res.data.total
                    res.data.list.forEach(item => {
                        item.submitTime = this.formatTime(item.submitTime)
                        this.$set(item, 'status', item.statusMapper[item.billStatus])
                        this.$set(item, 'address', this.formatAddress(item))
                    })
                    this.list = res.data.list
                })
            },
            handleSearchList () {
                this.activeName = '全部'
                this.list = []
                this.$http.get('/bill/getByOrderNumber/', { params: { order_number: this.QueryList.order_number } }).then(res => {
                    this.$set(res.data.data, 'status', res.data.data.statusMapper[res.data.data.billStatus])
                    this.$set(res.data.data, 'address', this.formatAddress(res.data.data))
                    this.$set(this.list, 0, res.data.data)
                })
            },
            handlepay (index, row) {
                this.dialogVisible = true
                this.order_number = row.order_number
            },
            pay () {
                const data = {
                    order_number: this.order_number,
                    billStatus: 2,
                    paymentTime: new Date()
                }
                this.$http.post('/bill/alterOrder/', data).then(res => {
                    if (res.data === true) {
                        this.config.theme = 'success'
                        this.config.message = '支付成功'
                        this.getOrderListbyStatus()
                    } else {
                        this.config.theme = 'error'
                        this.config.message = '支付失败'
                    }
                    this.$bkMessage(this.config)
                })
                this.dialogVisible = false
                this.getOrderList()
            },
            handleDeleteOrder (index, row) {
                const self = this
                this.$bkInfo({
                    title: '确认要删除？',
                    confirmLoading: true,
                    confirmFn: async () => {
                        try {
                            await new Promise(resolve => {
                                setTimeout(() => {
                                    resolve('成功')
                                }, 1000)
                                this.getOrderList()
                            })
                            self.DeleteOrder(index, row)
                            return true
                        } catch (e) {
                            return false
                        }
                    }
                })
            },
            DeleteOrder (index, row) {
                this.$http.get('/bill/deleteOrder/', { params: { order_number: row.order_number } }).then(res => {
                    console.log(res)
                    if (res.data.result === true) {
                        this.config.theme = 'success'
                        this.config.message = '删除成功'
                        this.getOrderList()
                    } else {
                        this.config.theme = 'error'
                        this.config.message = '删除失败'
                    }
                    this.$bkMessage(this.config)
                })
            },
            handleConfirmOrder (index, row) {
                const self = this
                this.$bkInfo({
                    title: '确认已收到货？',
                    confirmLoading: true,
                    confirmFn: async () => {
                        try {
                            await new Promise(resolve => {
                                setTimeout(() => {
                                    resolve('成功')
                                }, 1000)
                            })
                            self.ConfirmOrder(index, row)
                            return true
                        } catch (e) {
                            return false
                        }
                    }
                })
            },
            ConfirmOrder (index, row) {
                const data = {
                    order_number: row.order_number,
                    billStatus: 4,
                    confirmTime: new Date()
                }
                this.$http.post('/bill/alterOrder/', data).then(res => {
                    console.log(res)
                    if (res.data === true) {
                        this.config.theme = 'success'
                        this.config.message = '确认成功'
                        this.getOrderListbyStatus()
                    } else {
                        this.config.theme = 'error'
                        this.config.message = '确认失败'
                    }
                    this.$bkMessage(this.config)
                })
            },
            handleClose () {
                //
            }
        }
    }
</script>

<style scoped>
  .input-width {
    width: 203px;
  }
</style>
